<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="utf-8">
    <base href="/">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
    <title>首页 - 光年(Light Year Admin)后台管理系统模板</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/materialdesignicons.min.css" rel="stylesheet">
    <link href="css/style.min.css" rel="stylesheet">
    <link href="css/animate.css" rel="stylesheet">
    <!--对话框-->
    <link rel="stylesheet" href="js/jconfirm/jquery-confirm.min.css">
    <link rel="stylesheet" href="css/bootstrapValidator.css"/>
</head>

<body data-logobg="color_8" data-headerbg="color_8" data-sidebarbg="color_8" data-theme="default" >
<div class="lyear-layout-web" style="background-image: url('/images/background3.jpg'); background-size: cover; background-attachment: fixed;">
    <div class="lyear-layout-container">


        <div id="common" >
            <!--左侧导航-->
            <aside class="lyear-layout-sidebar">

                <!-- logo -->
                <div id="logo" class="sidebar-header">
                    <a href="api/index.jsp"><img src="/images/logo-zl.png" title="LightYear" alt="LightYear" /></a>
                </div>
                <div class="lyear-layout-sidebar-scroll">

                    <nav class="sidebar-main">
                        <ul class="nav nav-drawer">
                            <li class="nav-item "> <a href="/api/index.html"><i class="mdi mdi-home"></i> 后台首页</a></li>
                            <li class="nav-item "> <a href="/api/user.html"><i class="mdi mdi-account-multiple"></i> 用户管理</a></li>
                            <li class="nav-item "> <a href="/api/novel.html"><i class="mdi mdi-book-open-page-variant"></i> 小说管理</a></li>
                            <li class="nav-item "> <a href="/api/category.html"><i class="mdi mdi-server"></i> 类别管理</a></li>
                            <li class="nav-item "> <a href="/api/admin.html"><i class="mdi mdi-account-multiple"></i> 管理员管理</a></li>
                            <li class="nav-item nav-item-has-subnav">
                        </ul>
                    </nav>

                </div>

            </aside>
            <!--End 左侧导航-->

            <!--头部信息-->
            <header class="lyear-layout-header">

                <nav class="navbar navbar-default">
                    <div class="topbar">

                        <div class="topbar-left">
                            <div class="lyear-aside-toggler">
                                <span class="lyear-toggler-bar"></span>
                                <span class="lyear-toggler-bar"></span>
                                <span class="lyear-toggler-bar"></span>
                            </div>
                            <span class="navbar-page-title">  </span>
                        </div>

                        <ul class="topbar-right">
                            <li class="dropdown dropdown-profile">
                                <a href="javascript:void(0)" data-toggle="dropdown">

                                    <span><span id="name"></span><span class="caret" ></span></span>
                                </a>
                                <ul class="dropdown-menu dropdown-menu-right">
                                    <li> <a href="javascript:void(0)" id="getAdmin" ><i class="mdi mdi-account"></i> 个人信息</a> </li>
                                    <li> <a href="javascript:void(0)" id="updateAdmin"><i class="mdi mdi-lock-outline"></i> 修改密码</a> </li>
                                    <li class="divider"></li>
                                    <li> <a href="javascript:void(0)" id="exit" ><i class="mdi mdi-logout-variant"></i> 退出登录</a> </li>
                                </ul>
                            </li>
                        </ul>

                    </div>
                </nav>

            </header>
            <!--End 头部信息-->

            <!--个人信息-->
            <div class="modal fade" id="admin-class" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                            <h4 class="modal-title" >个人信息</h4>
                        </div>
                        <div class="modal-body">
                            <form class="form-horizontal"  action="lyear_forms_elements.html" method="post" onsubmit="return false;">
                                <div class="form-group">
                                    <label class="col-md-3 control-label" for="adminid">账号：</label>
                                    <div class="col-md-7">
                                        <input class="form-control" type="text" readonly id="adminid"  >
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-md-3 control-label" for="adminusername">账号：</label>
                                    <div class="col-md-7">
                                        <input class="form-control" type="text" readonly id="adminusername" >
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-md-3 control-label"  for="adminpassword">密码：</label>
                                    <div class="col-md-7">
                                        <input class="form-control" type="text" readonly id="adminpassword" >
                                    </div>
                                </div>
                            </form>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        </div>
                    </div>
                </div>
            </div>
            <!--个人信息end-->

            <!--修改密码-->
            <div class="modal fade" id="password-class" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close" onclick="clearForm()"><span aria-hidden="true">&times;</span></button>
                            <h4 class="modal-title" >个人信息</h4>
                        </div>
                        <div class="modal-body">
                            <form class="form-horizontal"  action="lyear_forms_elements.html" id="updateForm" method="post" onsubmit="return false;">
                                <div class="form-group">
                                    <label class="col-md-3 control-label" for="oldpassword" >旧密码：</label>
                                    <div class="col-md-7">
                                        <input class="form-control" type="password" id="oldpassword" name="oldpassword" placeholder="请输入旧密码">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-md-3 control-label" for="newpassword1" >新密码：</label>
                                    <div class="col-md-7">
                                        <input class="form-control" type="password" id="newpassword1" name="newpassword1" placeholder="请输入新密码">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-md-3 control-label" for="newpassword2" placeholder="请输入再次输入新密码">新密码：</label>
                                    <div class="col-md-7">
                                        <input class="form-control" type="password" id="newpassword2" name="newpassword2" placeholder="请输入再次输入新密码">
                                    </div>
                                </div>
                            </form>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal" onclick="clearForm()">关闭</button>
                            <button type="button" class="btn btn-primary" id="update">修改</button>
                        </div>
                    </div>
                </div>
            </div>
            <!--修改密码end-->
        </div>

        <!--页面主要内容-->
        <main class="lyear-layout-content">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-lg-12">
                        <div class="card" style="background-image: url('/images/background3.jpg'); background-size: cover; background-attachment: fixed;">

                            <div class="card-toolbar clearfix">
                                <div class="toolbar-btn-action" >
                                    <a class="btn btn-primary m-r-5"  data-toggle="modal" id="add" data-target="#add-class" ><i class="mdi mdi-plus" ></i> 新增</a>
                                    <form class="pull-right search-bar" method="get" action="javascript:void(0);" role="form">
                                        <div class="input-group">
                                            <input type="text" class="form-control" id="selectKeyword" oninput="findAll(1)" placeholder="请输入关键字">
                                        </div>
                                    </form>
                                </div>
                            </div>


                            <div class="card-body">
                                <!-- 表格 -->
                                <div id='novel_table'></div>
                                <!-- 表格结束 -->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </main>
        <!--End 页面主要内容结束-->
    </div>
</div>


<!-- 添加用户的弹出框 -->
<div class="modal fade" id="add-class" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close" onclick="clearForm()"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" >添加类别</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" id="addNovelForm" action="lyear_forms_elements.html" method="post" onsubmit="return false;">
                    <div class="form-group">
                        <label class="col-md-3 control-label" >上级类别：</label>
                        <div class="col-md-7">
                            <div  class='category_table'></div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-md-3 control-label" for="addname">类别名称：</label>
                        <div class="col-md-7">
                            <input class="form-control" type="text" id="addname" name="addname" placeholder="请输入类别名称..">
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal"onclick="clearForm()">关闭</button>
                <button type="button" class="btn btn-primary" data-dismiss="modal" id="addNovel">添加</button>
            </div>
        </div>
    </div>
</div>
<!-- 添加班级的弹出框结束 -->


<!-- 修改用户的弹出框 -->
<div class="modal fade" id="modify-class" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"onclick="clearForm()"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="exampleModalLabel">修改类别</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" id="updateNovelForm" action="lyear_forms_elements.html" method="post" onsubmit="return false;">
                    <div class="form-group">
                        <div class="col-md-7">
                            <input class="form-control" type="hidden" id="updateid">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-md-3 control-label" >上级类别：</label>
                        <div class="col-md-7">
                            <div  id='updatecategory_table'></div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-md-3 control-label" for="updatename">类别名称：</label>
                        <div class="col-md-7">
                            <input class="form-control" type="text" id="updatename" name="updatename"  placeholder="请输入类别名称..">
                        </div>
                    </div>
                </form>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal" onclick="clearForm()">关闭</button>
                <button type="button" class="btn btn-primary" id="updateNovel" data-dismiss="modal">修改</button>
            </div>
        </div>
    </div>
</div>
<!-- 修改用户的弹出框结束 -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/perfect-scrollbar.min.js"></script>
<script type="text/javascript" src="js/main.min.js"></script>
<script src="js/bootstrap-notify.min.js"></script>
<script type="text/javascript" src="js/template-web.js"></script>
<script type="text/javascript" src="js/lightyear.js"></script>
<!--对话框-->
<script src="js/jconfirm/jquery-confirm.min.js"></script>
<!--图表插件-->
<script src="js/echarts.js"></script>
<script type="text/javascript" src="js/bootstrapValidator.js"></script>
<!--对话框-->
<script type="text/html" id="all_novel">
    <!--主要表格-->
    <table class="table table-bordered table-hover ">
        <thead>
        <tr>
            <th>id</th><th>类型</th><th>上级类型</th><th>操作</th>
        </tr>
        </thead>
        <tbody>
        {{each data.list}}
        <tr>
            <td>{{$value.id}}</td>
            <td>{{$value.name}}</td>
            {{if $value.parent_id==0}}
            <td>无上级分类</td>
            {{else}}
            <td>{{$value.parent}}</td>
            {{/if}}
            <td>
                <button class="btn btn-info btn-xs" type="button" onclick="findById('{{$value.id}}')" data-toggle="modal" data-target="#modify-class" >
                    <span class="mdi mdi-lead-pencil"></span>修改
                </button>
                <button class="btn btn-danger btn-xs" type="button" onclick="deleteNovel('{{$value.id}}')" >
                    <span class="mdi mdi-close"></span>删除
                </button>
            </td>
        </tr>
        {{/each}}
        </tbody>
    </table>
    <!--主要表格结束-->
    <!--分页-->
    <nav class="text-center">
        <ul class="pagination pagination-circle">
            {{if data.hasPreviousPage}}
            <li><a href="javascript:void(0);" onclick="findAll('{{data.pageNum-1}}')" ><span><i class="mdi mdi-chevron-left"></i></span></a></li>
            {{else}}
            <li class="disabled"><a href="javascript:void(0);"><span><i class="mdi mdi-chevron-left"></i></span></a></li>
            {{/if}}
            {{each data.navigatepageNums}}
            {{if $value==data.pageNum}}
            <li class="active"><a href="javascript:void(0);">{{$value}}</a></li>
            {{else}}
            <li><a href="javascript:void(0);" onclick="findAll('{{$value}}')"  >{{$value}}</a></li>
            {{/if}}
            {{/each}}
            {{if data.hasNextPage}}
            <li><a href="javascript:void(0);"  onclick="findAll('{{data.pageNum+1}}')"><span><i class="mdi mdi-chevron-right"></i></span></a></li>
            {{else}}
            <li class="disabled"><a href="javascript:void(0);"><span><i class="mdi mdi-chevron-right"></i></span></a></li>
            {{/if}}
        </ul>
    </nav>
    <!--分页结束-->
</script>
<!--对话框end-->
<!--下拉框模板-->
<script type="text/html" id="all_category">
    <select class="form-control" id="addparentid" name="example-select" size="1">
        <option value="0">默认为一级分类</option>
        {{each data}}
        {{if $value.parent_id==0 }}
        <option value="{{$value.id}}">{{$value.name}}</option>
        {{/if}}
        {{/each}}
    </select>
</script>
<script type="text/html" id="update_category">
    <select class="form-control" id="updateparentid" name="example-select" size="1">
        <option value="0">默认为一级分类</option>
        {{each data}}
        {{if $value.parent_id==0 }}
        <option value="{{$value.id}}">{{$value.name}}</option>
        {{/if}}
        {{/each}}
    </select>
</script>
<!--下拉框模板end-->
<script type="text/javascript">
    //刷新页面
    function findAll(id){
        $.ajax({
            url:"api/category/page",
            type:"GET",
            data:{currentPage:id,keyword:$("#selectKeyword").val()},
            dataType:"JSON",
            success:function (resp){
                if(resp.code===10000){
                    //resp.data是返回的数据，将服务器返回的数据在模板中渲染
                    let html = template('all_novel', {data:resp.data});
                    //将渲染完成的数据挂载在页面上
                    $('#novel_table').html(html);
                }else {
                    lightyear.notify(resp.msg, 'success', 1000, 'mdi mdi-emoticon-happy', 'top', 'center' );
                }
            }
        })
    }

    $(document).ready(function () {
        findAll(1);
    });

    function clearForm(){
        $("#addNovelForm").data('bootstrapValidator').resetForm(true);
        $("#updateNovelForm").data('bootstrapValidator').resetForm(true);
    }
    function findById(id){
        $.ajax({
            url:"api/category/"+id,
            type:"GET",
            dataType:"JSON",
            success:function (resp){
                selectCategory();
                if(resp.code===10000){
                    $("#updateid").val(resp.data.id);
                    $("#updatename").val(resp.data.name);
                }else {
                    lightyear.notify(resp.msg, 'success', 1000, 'mdi mdi-emoticon-happy', 'top', 'center' );
                }
            }
        })
    }

    /*新增小说*/
    $("#addNovel").click(function (){
        $("#addNovelForm").data('bootstrapValidator').validate();//相当于触发一次所有的验证
        $.ajax({
            url:"api/category/add",
            type:"POST",
            contentType: "application/json;charset=utf-8", // 设置Content-Type为application/json
            data:JSON.stringify({name:$("#addname").val() , parent_id:$("#addparentid").val()}),
            dataType:"JSON",
            success:function (resp){
                $("#addNovelForm")[0].reset();
                if(resp.code===10000){
                    lightyear.notify(resp.msg, 'success', 1000, 'mdi mdi-emoticon-happy', 'top', 'center' );
                    clearForm();
                    findAll(1);
                }else {
                    lightyear.notify(resp.msg, 'success', 1000, 'mdi mdi-emoticon-happy', 'top', 'center' );
                }
            }
        })
    })


    /*获取分类*/
    function selectCategory(){
        $.ajax({
            url:"api/novel/category",
            type:"GET",
            dataType:"JSON",
            success:function (resp){
                console.log(resp);
                if(resp.code===10000){
                    //resp.data是返回的数据，将服务器返回的数据在模板中渲染
                    let html = template('all_category', {data:resp.data});
                    //将渲染完成的数据挂载在页面上
                    $('.category_table').html(html);
                    //resp.data是返回的数据，将服务器返回的数据在模板中渲染
                    let html2 = template('update_category', {data:resp.data});
                    //将渲染完成的数据挂载在页面上
                    $('#updatecategory_table').html(html2);

                }else {
                    lightyear.notify(resp.msg, 'success', 1000, 'mdi mdi-emoticon-happy', 'top', 'center' );
                }
            }
        })
    }


    /*渲染下拉菜单*/
    $("#add").click(function (){
        selectCategory();
    })

    $("#updateNovel").click(function (){
        $("#updateNovelForm").data('bootstrapValidator').validate();//相当于触发一次所有的验证
        $.ajax({
            url:"api/category/update",
            type:"POST",
            contentType: "application/json;charset=utf-8", // 设置Content-Type为application/json
            data:JSON.stringify({id:$("#updateid").val(),name:$("#updatename").val(), parent_id:$("#updateparentid").val()}),
            dataType:"JSON",
            success:function (resp){
                if(resp.code===10000){
                    //$("#add-class").modal("hide");
                    lightyear.notify(resp.msg, 'success', 1000, 'mdi mdi-emoticon-happy', 'top', 'center' );
                    clearForm();
                    findAll(1);
                }else {
                    lightyear.notify(resp.msg, 'success', 1000, 'mdi mdi-emoticon-happy', 'top', 'center' );
                }
            }
        })
    })

    function deleteNovel(id){
        $.confirm({
            title: '删除类别',
            content: '确定删除该类别信息',
            buttons: {
                confirm: {
                    text: '确认',
                    action: function(){
                        $.ajax({
                            url:"api/category/"+id,
                            type:"DELETE",
                            dataType:"JSON",
                            success:function (resp){
                                findAll(1);
                                if(resp.code===10000){
                                    //$("#add-class").modal("hide");
                                    lightyear.notify(resp.msg, 'success', 1000, 'mdi mdi-emoticon-happy', 'top', 'center' );
                                }else {
                                    lightyear.notify(resp.msg, 'success', 1000, 'mdi mdi-emoticon-happy', 'top', 'center' );
                                }
                            }
                        })
                    }
                },
                cancel: {
                    text: '取消',
                },
            }
        });
    }

    /**
     *下面就是bootstrapValidator的初始化
     *定义你需要的哪些表单需要验证，验证什么内容
     **/
    $("#addNovelForm").bootstrapValidator({
        feedbackIcons: {//这里是用来对应三种不同状态时，在输入框后面添加的图标
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        fields:{//哪些字段需要验证，和html中的输入框，下拉框等等表单name属性所对应。
            addname:{
                validators:{//从这里也可以容易的看出可以有多个验证信息
                    notEmpty:{//非空验证
                        message:"请输入类别名！！！" //提示信息，当你不写这里时它会自动的调用自带的提示信息，默认是英文，可导入language下的中文JS文件
                    },
                }
            },
        }
    });

    /**
     *下面就是bootstrapValidator的初始化
     *定义你需要的哪些表单需要验证，验证什么内容
     **/
    $("#updateNovelForm").bootstrapValidator({
        feedbackIcons: {//这里是用来对应三种不同状态时，在输入框后面添加的图标
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        fields:{//哪些字段需要验证，和html中的输入框，下拉框等等表单name属性所对应。
            updatename:{
                validators:{//从这里也可以容易的看出可以有多个验证信息
                    notEmpty:{//非空验证
                        message:"请输入类别名！！！" //提示信息，当你不写这里时它会自动的调用自带的提示信息，默认是英文，可导入language下的中文JS文件
                    },
                }
            }
        }
    });


    function clearForm(){
        $("#updateForm").data('bootstrapValidator').resetForm(true);
        $("#oldpassword").val(null);
        $("#newpassword1").val(null);
        $("#newpassword2").val(null);
    }

    $("#exit").click(function (){
        $.confirm({
            title: '退出登录',
            content: '确定退出登录该账号',
            buttons: {
                confirm: {
                    text: '确认',
                    action: function(){
                        $.ajax({
                            url:"logout",
                            type:"POST",
                            dataType:"JSON",
                            success:function (resp){
                                if(resp.code===10000){
                                    lightyear.notify(resp.msg, 'success', 1000, 'mdi mdi-emoticon-happy', 'top', 'center','${pageContext.request.contextPath}/login.jsp' );
                                }else {
                                    lightyear.notify(resp.msg, 'success', 1000, 'mdi mdi-emoticon-happy', 'top', 'center' );
                                }
                            }
                        })
                    }
                },
                cancel: {
                    text: '取消',
                },
            }
        });
    })

    $("#getAdmin").click(function (){
        $("#admin-class").modal("show");
        getAdmin();
    })

    $("#updateAdmin").click(function (){
        $("#password-class").modal("show");
    })

    $("#update").click(function (){
        $("#updateForm").data('bootstrapValidator').validate();//相当于触发一次所有的验证
        if($("#updateForm").data('bootstrapValidator').isValid()){//判断验证是否已经通过
            $.ajax({
                url:"api/common/update",
                type:"POST",
                data:{newPassword:$("#newpassword1").val(),oldPassword:$("#oldpassword").val()},
                dataType:"JSON",
                success:function (resp){
                    if(resp.code===10000){
                        $("#password-class").modal('hide');
                        clearForm();
                        lightyear.notify(resp.msg, 'success', 1000, 'mdi mdi-emoticon-happy', 'top', 'center');
                    }else {
                        clearForm();
                        lightyear.notify(resp.msg, 'success', 1000, 'mdi mdi-emoticon-happy', 'top', 'center' );
                    }
                }
            })
        }
    })

    $(document).ready(function () {
        getAdmin();
    });
    function getAdmin(){
        $.ajax({
            url:"api/common/get",
            type:"GET",
            dataType:"JSON",
            success:function (resp){
                if(resp.code===10000){
                    $("#name").text(resp.data.username);
                    $("#adminid").val(resp.data.id);
                    $("#adminusername").val(resp.data.username);
                    $("#adminpassword").val(resp.data.password);
                }else {
                }
            }
        })
    }

    /**
     *下面就是bootstrapValidator的初始化
     *定义你需要的哪些表单需要验证，验证什么内容
     **/
    $("#updateForm").bootstrapValidator({
        feedbackIcons: {//这里是用来对应三种不同状态时，在输入框后面添加的图标
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        fields:{//哪些字段需要验证，和html中的输入框，下拉框等等表单name属性所对应。
            oldpassword:{
                validators:{//从这里也可以容易的看出可以有多个验证信息
                    notEmpty:{//非空验证
                        message:"请输入旧密码！！！" //提示信息，当你不写这里时它会自动的调用自带的提示信息，默认是英文，可导入language下的中文JS文件
                    },
                }
            },
            newpassword1:{
                validators:{
                    notEmpty:{
                        message:"请输入新密码！！！"
                    }
                }
            },
            newpassword2:{
                validators:{
                    notEmpty:{
                        message:"请输入验证码！！！"
                    },
                    identical: {//用来判断制定的字段和当前字段一致与否
                        field: 'newpassword1',
                        message: "两次输入的密码不一致！！！"
                    }

                }
            }
        }
    });

</script>
</body>
</html>